<template>
  <div class="container">
    <div class="top">
      <div class="hos">
        <div style="margin-left: 8px; margin-top: 3px; margin-right: -18px">
          <img class="logo" src="@/assets/images/yy32.ico" />
        </div>
        <div class="name">{{ zsInfo?.zsss }}</div>
        <div class="slogan">
          <p>{{ zsInfo?.zsby }}</p>
          <p>{{ zsInfo?.zsby2 }}</p>
        </div>
      </div>
<!--      <div class="department"><img src="@/assets/images/by.ico" /> {{ zsInfo.zsmc }}</div>-->
      <div class="department">{{ zsInfo.zsmc }}</div>
    </div>
    <div class="center">
      <div class="left">
        <p class="title">出诊医生</p>
        <div class="docter">
          <img :src="doctorInfo.ystx" alt="" />
          <p>
            {{ doctorInfo.ysxm }} <span>{{ doctorInfo.yszc }} </span>
          </p>
        </div>
        <div class="time">
          <p>上午：{{ zsInfo?.swgzsj }}</p>
          <p>下午：{{ zsInfo?.xwgzsj }}</p>
        </div>

        <p class="title">医生介绍</p>
        <div class="text">
          {{ doctorInfo.ysms }}
        </div>
      </div>

      <div class="right">
        <p class="title">正在就诊</p>
        <div class="now">{{ topInfo.yyid }} {{ topInfo.hzxm }}</div>
        <p class="title">等候就诊</p>
        <ul class="list2">
          <li v-for="(info, index) in listInfo" :key="index">
            <p>{{ info.yyid }} {{ info.hzxm }}</p>
          </li>
        </ul>

        <!--        <van-swipe class="list2" vertical :autoplay="autoplay">-->
        <!--          <van-swipe-item v-for="(item, index) in fzArray" :key="index">-->
        <!--            <p v-for="(info, index) in item" :key="index">{{ info.kh }} {{ info.hzxm }}</p>-->
        <!--          </van-swipe-item>-->
        <!--        </van-swipe>-->
      </div>
    </div>
    <div class="footer">
      <p>{{ zsInfo?.zsts }}</p>
    </div>
  </div>
</template>
<script setup>
import { onMounted, onUnmounted } from "vue"
import { toRefs, reactive, ref } from "vue"
import { getList } from "@/api/zyjh.js"
import { useRoute } from "vue-router"
let tips = ref("请按叫号顺序进入诊室，感谢配合! ")
let autoplay = 6000
let state = reactive({
  doctorInfo: {
    ysxm: "暂无",
    yszc: "暂无",
    ysms: "暂无",
    ystx: new URL("@/assets/images/user.png", import.meta.url).href
  },
  topInfo: {
    yyid: "暂无",
    hzxm: "就诊"
  },
  zsInfo: {
    zsmc: "暂无"
  },
  listInfo: [
    {
      yyid: "暂无",
      hzxm: "等待"
    }
  ],
  fzArray: [[{ yyid: "暂无", hzxm: "等待" }], [{ yyid: "暂无", hzxm: "等待" }]]
})

let { doctorInfo, topInfo, listInfo, zsInfo, fzArray } = toRefs(state)
let timer = null
let tipTimer = null
let zs = useRoute().query.zs
onMounted(() => {
  // tipTimer = setInterval(() => {
  //   tips.value = tips.value.slice(1) + tips.value.slice(0, 1)
  // }, 800)
  timer = setInterval(() => {
    getList({ zsdm: zs, jzrq: "2023-11-09" }).then((res) => {
      const { doctorInfo, topInfo, listInfo, zsInfo } = res.data.data
      state.doctorInfo = doctorInfo
      state.topInfo = topInfo
      state.listInfo = listInfo
      state.zsInfo = zsInfo
      state.fzArray = listInfo
      console.log(state)
    })
  }, 1000 * 6)
})
onUnmounted(() => {
  clearInterval(timer)
  // clearInterval(tipTimer)
})

function handleArray(array, subGroupLength) {
  let index = 0
  let newArray = []
  while (index < array.length) {
    newArray.push(array.slice(index, (index += subGroupLength)))
  }
  return newArray
}
</script>
<style lang="scss" scoped>
:deep(.van-swipe__indicator) {
  background-color: #333;
}

:deep(.van-swipe__indicator--active) {
  background-color: #1989fa;
}

/*.custom-indicator {*/
/*  position: absolute;*/
/*  right: 5px;*/
/*  bottom: 5px;*/
/*  padding: 2px 5px;*/
/*  font-size: 20px;*/
/*  background: rgba(0, 0, 0, 0.1);*/
/*}*/

.container {
  background: #e1e1e1;
  height: 100vh;

  .top {
    height: 245px;

    .hos {
      font-size: 24px;
      display: flex;
      justify-content: space-between;
      .logo {
        width: 60px;
        height: 60px;
        margin-top: 3px;
      }
      .name {
        width: 50%;
        color: #000;
        font-size: 36px;
        font-weight: bold;

        margin-top: 16px;
      }

      .slogan {
        width: 50%;
        width: 280px;
        color: #fff;
        font-size: 22px;
        text-indent: 60px;
        padding: 5px;
        background: linear-gradient(55deg, transparent 52px, #61a0e9 0) top left;

        p {
          margin-bottom: 5px;
        }
      }
    }

    .department {
      text-align: center;
      font-size: 78px;
      font-weight: bold;
      background: #61a0e9;
      color: #fff;
      padding: 20px 0;
      display: flex;
      justify-content: center;
      img {
        display: block;
        width: 110px;
        height: 110px;
      }
    }
  }

  .center {
    height: calc(100vh - 290px);
    display: flex;
    align-content: space-around;

    .left {
      width: 50%;
      margin: 0 10px 0 20px;

      .title {
        font-size: 30px;
        font-weight: bold;
        color: #fff;
        background: #61a0e9;
        text-align: center;
        padding: 8px;
      }

      .docter {
        background: #fff;
        padding-bottom: 10px;

        img {
          width: 100%;
          height: 360px;
          margin: 0 auto;
        }

        p {
          font-size: 32px;
          font-weight: bold;
          text-align: center;

          span {
            font-size: 28px;
            color: #0a224e;
          }
        }
      }

      .text {
        background: #fff;
        padding: 20px;
        height: 416px;
        font-size: 22px;
      }

      .time {
        text-align: center;
        font-size: 32px;
        margin: 10px auto;
      }
    }

    .right {
      width: 50%;
      margin: 0 20px 0 10px;
      font-size: 22px;

      .title {
        font-size: 30px;
        font-weight: bold;
        color: #fff;
        background: #61a0e9;
        text-align: center;
        padding: 8px;
      }

      .now {
        font-size: 38px;
        font-weight: bold;
        color: red;
        background: #fff;
        text-indent: 80px;
        height: 135px;
        line-height: 135px;
        margin-bottom: 10px;
        overflow: auto;
      }

      .list2 {
        background: #fff;
        color: #293f66;
        height: 800px;

        p {
          font-size: 38px;
          font-weight: bold;
          text-indent: 80px;
          height: 158px;
          line-height: 158px;
        }
      }

      .list {
        background: #fff;
        color: #293f66;
        overflow: auto;
        height: 785px;

        p {
          font-size: 38px;
          font-weight: bold;
          text-indent: 80px;
          height: 158px;
          line-height: 158px;
        }
      }
    }
  }

  .footer {
    height: 45px;
    line-height: 45px;
    background: #61a0e9;
    text-align: center;
    font-size: 20px;
    color: #fff;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    p {
      display: inline-block;
      padding-left: 100%;
      animation: marquee 20s linear infinite;
    }
  }
}
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>
